<!--<script src="--><? //= constant("FCPATH") ?><!--/public/js/bootstrap-typeahead.js"></script>-->
<aside class="col-md-4 sidebar">
    <!-- start tag cloud widget -->
    <div class="widget">
        <h4 class="title">文章搜索</h4>

        <div class="content community center-block">
            <div class="btn-group">
                <input type="text" class="span3 form-control" style="margin: 0 auto;" id="search_word_input"
                       data-toggle="dropdown"
                       aria-expanded="false">
                <ul class="dropdown-menu" role="menu" style="display: none;" id="typeahead"></ul>
            </div>
            <button class="glyphicon glyphicon-search disabled" id="word_search" disabled="disabled"></button>
            <input type="hidden" id="search_hidden">

        </div>
    </div>
    <script>
        var word_search = "";
        var keydown_count = 0;
        $("#search_word_input").keyup(function () {
            if ($("#search_word_input").val().length > 0) {
                $.ajax({
                    type: "POST",
                    url: APP + "/word/search_word",
                    async: true,
                    data: {
                        search: $("#search_word_input").val()
                    },
                    dataType: "json",
                    success: function (data) {
                        $("#typeahead").empty();
                        $.each(data, function (index, item) {
                            $("#typeahead").append("<li class='typeahead_li' id='search_word_" + item['Id'] + "'><a>" + item['title'] + "</a></li>")
                        });
                        $("#typeahead").show();
                        keydown_count = 0;
                    },
                    error: function () {
                        $("#typeahead").append("<li class='typeahead_li'>网络异常</li>");
                    }
                });
            }
        });
        $("#search_word_input").blur(function () {
            $("#typeahead").hide();
            keydown_count = 1;
        });
        $(document).on('click', ".typeahead_li", function () {
            $("#search_word_input").val($(this).children().html());
            $("#search_hidden").val($(this).attr('Id').split("_")[2]);
            $("#typeahead").hide();
            $("#word_search").removeAttr("disabled", "disabled");
        });
        $("#search_word_input").click(function () {
            if (keydown_count == 1) {
                $("#typeahead").show();
                $("#word_search").attr("disabled", "disabled");
                keydown_count = 0;
            }
            else {
                $("#typeahead").hide();
                keydown_count = 1;
            }
        });
        $("#word_search").click(function () {
            var word_search_id = $("#search_hidden").val();
            window.location.href = "<?=constant("APP")?>/Word/show_search_word/" + word_search_id;
        });
    </script>

    <!-- start tag cloud widget -->
    <div class="widget">
        <h4 class="title">标签云</h4>

        <div class="content tag-cloud">
            <?php foreach ($label_list as $list): ?>
                <a href="<?=constant("APP")?>/Label/label_for_word/<?= $list['label_id'] ?>"><?= $list['label_name'] ?></a>
            <?php endforeach ?>
        </div>
    </div>
    <!-- end tag cloud widget -->

    <!-- start widget -->
    <div class="widget">
        <h4 class="title">日历</h4>

        <div class="connect" id="calendar">
            <?= $calendar ?>
        </div>
    </div>
    <!-- end widget -->

    <!-- start widget -->
    <div class="widget">
        <h4 class="title">音乐</h4>

        <div class="connect" style="padding-bottom:20px;text-align: center">
            <p id="music_name" class="text-center"></p>

            <p>
                <span class="col-md-4 col-sm-2 glyphicon glyphicon-step-backward" id="mlast"
                      style="cursor: pointer"></span>
                <span class="col-md-4 col-sm-2 glyphicon glyphicon-play" style="cursor: pointer" id="mplay">
                    <audio autoplay="autoplay" loop="loop" id="audio"></audio>
                    <input type="hidden" id="music_this_song" value="1">
                </span>
                <span class="col-md-4 col-sm-2 glyphicon glyphicon-step-forward" id="mnext" style="cursor: pointer">
                </span>
            </p>
            <script>
                /*音乐播放处理*/
                var sj_music = true;
                var this_song_num = $("#music_this_song").val();
                function play_music(this_song_num, style) {
                    $.ajax({
                        type: "post",
                        url: APP + "/Blog/get_music",
                        data: {
                            music_num: $("#music_this_song").val(),
                            style: style
                        },
                        dataType: "json",
                        async: true,
                        success: function (data) {
                            $("#music_this_song").val(data['Id']);
                            $("#audio").attr("src", APP + "/" + data['url']);
                            $("#music_name").html(data['title']);

                            //$("#music_name").html(JSON.stringify(data));
                            //$("#audio").play();
                        }
                    });
                }
                $("#mplay").click(function () {
                    if (sj_music) {
                        $("#mplay").attr("class", "col-md-4 col-sm-2 glyphicon glyphicon-pause");
                        $("#audio").pause();
                        sj_music = false;
                    } else {
                        $("#mplay").attr("class", "col-md-4 col-sm-2 glyphicon glyphicon-play");
                        $("#audio").play();
                        sj_music = true;
                    }
                });
                $("#mlast").click(function () {
                    play_music(this_song_num, -1);
                });
                $("#mnext").click(function () {
                    play_music(this_song_num, 1);
                });
                play_music(this_song_num, 0);
            </script>
        </div>
    </div>
    <!-- end widget -->

    <!-- start widget -->
    <div class="widget">
        <h4 class="title">广告</h4>

        <div class="connect" style="padding-bottom:20px;text-align: center">
            <span><a href="http://www.51zxw.net/study.asp?vip=10936448" target="_blank">51自学网－专业培训老师录制的视频教程，让学习变得很轻松</a></span>
        </div>
    </div>
    <!-- end widget -->
</aside>

</div>
</div>
</section>